const mode0 = VueLoader('./components/Mode0/index.vue')
const mode1 = VueLoader('./components/Mode1/index.vue')
const defaultImg = `./static/img/code.jpg`
const defaultImg2 = `./static/img/img.jpg`

new Vue({
	name: 'App',
	el: '#app',
	components: {
		mode0,
		mode1
	},
	data() {
		return {
			loaded: true,
			viewImg: '',
            more: false,
			data: {
				mode: 'mode0', // mode0 mode1
				layout: 1, // 1 2 3 4 5
				type: 'purity', // gradual purity
				color: '#fc4c3f',
				// 模版显示的效果数据
				info: {
					avatar: defaultImg,
					name: '啊白',
					title: '这个是商品的名称000000000000000000000000000000000000000000000000000',
					price: 888,
					imgs: [defaultImg2], // 商品分享的图片
					code: defaultImg
				}
			},
			modes: [{
				name: 'mode0',
				label: '样式一'
			}, {
				name: 'mode1',
				label: '样式二'
			}],
			layouts: [{
				name: 1,
				label: '1张图'
			}, {
				name: 2,
				label: '2张图'
			}, {
				name: 3,
				label: '3张图'
			}, {
				name: 4,
				label: '4张图'
			}, {
				name: 5,
				label: '5张图'
			}],
			types: [{
				name: 'purity',
				label: '纯色'
			}, {
				name: 'gradual',
				label: '渐变'
			}],
			colors: [{
				name: '#fc4c3f',
				label: ''
			}, {
				name: '#ff7e23',
				label: ''
			}, {
				name: '#ffc945',
				label: ''
			}, {
				name: '#3f9b68',
				label: ''
			}, {
				name: '#4ab0fa',
				label: ''
			}, {
				name: '#8548ed',
				label: ''
			}, {
				name: '#010101',
				label: ''
			}, {
				name: '#a1a1a1',
				label: ''
			}, {
				name: '#fff',
				label: ''
			}]
		}
	},
	watch: {
		'data.mode'() {
			this.loaded = false
			setTimeout(() => {
				this.loaded = true
			}, 300)
		}
	},
	methods: {
		save() {
			let qrDom = this.$refs.mode.$el
			// qrDom.scrollIntoView()
			requestAnimationFrame(() => {
				html2canvas(qrDom, {
					dpi: window && window.screen && window.screen.availWidth || 340,
					scale: window && window.devicePixelRatio || 2,
					width: qrDom.clientWidth,
					height: qrDom.clientHeight,
					scrollX: 0,
					scrollY: 0,
					useCORS: true, // 【重要】开启跨域配置
					allowTaint: true,//允许跨域图片
					taintTest: false,//是否在渲染前测试图片
					backgroundColor: null //避免图片有白色边框
				}).then((canvas) => {
					var pageData = canvas.toDataURL('image/jpeg')
					// console.log(pageData)
					
					// 正式使用的时候这段代码注释掉
					this.viewImg = pageData
					
					/* 
					网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息
					在小程序或者app内添加 web-view 组件 <web-view :src="src" @message="message"></web-view> 
					*/
					uni.postMessage({
						data: {
							action: pageData
						}
					})
					uni.navigateBack({
						delta: 1
					})
				})
			})
		},
		choseColor() {
			let $color = document.createElement('input')
			$color.type = 'color'
			$color.onchange = (e) => {
				console.log(e.target.value)
				this.data.color = e.target.value
			}
			$color.click()
		},
        //获取url的参数
        getQueryString: function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return (r[2]); return null;
        }
	},
	mounted() {
		
	}
})